import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:xv_flutter/model/product.dart';
import 'package:xv_flutter/router/application.dart';
import 'package:xv_flutter/utils/http.dart';
import 'package:xv_flutter/utils/utils.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    _getproduct();
    super.initState();
  }

  List<Items> list;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[BannerWidget(), HomeProductPage(list)],
      ),
    );
  }

  // 获取产品列表
  _getproduct() async {
    var fromData = {
      "page": 10,
    };
    await request('homePageProducts', formData: fromData).then((resp) {
      HomePageModel homePage = HomePageModel.fromJson(resp);
      setState(() {
        list = homePage.data.items;
      });
      // print(homePage.toJson());
    }).catchError((e) {
      print("Error ===> $e");
    });
  }
}

class HomeProductPage extends StatelessWidget {
  final List<Items> list;
  HomeProductPage(this.list);

  @override
  Widget build(BuildContext context) {
    double deviceWidth = MediaQuery.of(context).size.width;
    return Container(
      width: deviceWidth,
      color: Colors.white,
      padding: EdgeInsets.only(top: 10, bottom: 10, left: 7.5),
      child: _build(context, deviceWidth),
    );
  }

  _build(context, deviceWidth) {
    if (list != null) {
      double itemWidth = deviceWidth * 168.5 / 360;
      double imageWidth = deviceWidth * 110 / 360;

      var listWidges = list.map((e) {
        var bgColor = string2Color('#f8f8f8');
        Color titleColor = string2Color('#db5d41');
        Color subTitleColor = string2Color('#999999');

        return InkWell(
          onTap: (){
            Application.router.navigateTo(context, "/detail?id=12");
          },
          child: Container(
            width: itemWidth,
            margin: EdgeInsets.only(bottom: 5, left: 2),
            padding: EdgeInsets.only(top: 10, left: 13, bottom: 7),
            color: bgColor,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  e.name,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 15, color: titleColor),
                ),
                Text(
                  e.desc,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 15, color: subTitleColor),
                ),
                Container(
                  alignment: Alignment(0, 0),
                  margin: EdgeInsets.only(top: 5),
                  child: Image.asset(
                    e.imageUrl,
                    width: imageWidth,
                    height: imageWidth,
                  ),
                ),
              ],
            ),
          ),
        );
      }).toList();

      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
              padding: EdgeInsets.only(left: 5, bottom: 10),
              child: Text('最新产品',
                  style: TextStyle(
                      fontSize: 16, color: Color.fromRGBO(51, 51, 51, 1)))),
          Wrap(
            children: listWidges,
          ),
        ],
      );
    } else {
      Text('');
    }
  }
}

// 轮播组件
class BannerWidget extends StatelessWidget {
  final banners = [
    'assets/banners/1.jpg',
    'assets/banners/2.jpg',
    'assets/banners/3.jpg',
    'assets/banners/4.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = width * 540 / 1080;
    return Container(
      width: width,
      height: height,
      child: Swiper(
        itemBuilder: (BuildContext context, index) {
          return Container(
            margin: EdgeInsets.only(left: 5, right: 5),
            child: Image.asset(
              banners[index],
              width: width,
              height: height,
              fit: BoxFit.cover,
            ),
          );
        },
        itemCount: banners.length,
        scrollDirection: Axis.horizontal,
        autoplay: true,
      ),
    );
  }
}
